<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="楼栋名称">
        <el-input
          v-model="queryParams.loudongName"
          placeholder="请输入楼栋名称"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="queryParams.type"
          placeholder="楼栋类型"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in typeOptions"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getPage">搜索</el-button>
        <el-button type="primary" size="mini" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <span class="spanClass">
      <el-card class="box-card" v-for="l in loudongs">
      <div slot="header" class="clearfix">
        <span><el-link @click="to(l.id)">{{ l.loudongName }}</el-link></span>
        <el-tag type="success" style="margin-left: 150px">{{ l.typeName }}</el-tag>
      </div>
      楼栋名称：{{ l.loudongName }} <br><br>
      楼栋位置：{{ l.loudongLocation }}<br><br>
      楼栋总层数：{{ l.loudongNum }}<br><br>
        <!--      <div>楼栋总房间数：{{l.loudongNum}}</div>-->
      <el-button icon="el-icon-edit" size="mini" style="float: left" @click="onUpdate(l)"></el-button>
      <el-button icon="el-icon-delete" size="mini" style="float: right" @click="del(l.id)"></el-button>
    </el-card>
    </span>


    <el-dialog
      title="新增/修改楼栋"
      :visible.sync="dialogVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="楼栋名称" prop="loudongName" label-width="100px">
          <el-input v-model="ruleForm.loudongName"></el-input>
        </el-form-item>
        <el-form-item label="楼栋层数" prop="loudongNum" label-width="100px" v-if="!ruleForm.loudongNum">
          <el-input v-model="ruleForm.loudongNum"></el-input>
        </el-form-item>
        <el-form-item label="楼栋层数" prop="loudongNum" label-width="100px" v-if="ruleForm.loudongNum">
          <el-input v-model="ruleForm.loudongNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="楼栋位置" label-width="100px">
          <el-input v-model="ruleForm.loudongLocation"></el-input>
        </el-form-item>
        <el-form-item label="楼栋类型" label-width="100px">
          <el-select v-model="ruleForm.type" placeholder="请选择楼栋类型">
            <el-option v-for="t in typeOptions" :label="t.name" :value="t.id" :key="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {del, getPage, getType, saveOrUpdate} from "@/api/site/loudong";

export default {
  name: "index",
  data() {
    var validateNum = (rule, value, callback) => {
      if (value === '0') {
        callback(new Error('请输入正确的层数'));
      }
        callback();
      }
    return {
      rules: {
        loudongName: [
          {required: true, message: '请输入楼栋名称', trigger: 'blur'},
        ],
        loudongNum: [
          { validator: validateNum, trigger: 'blur' }
        ]
      },
      ruleForm: {},
      queryParams: {
        type: null,
        loudongName: ''
      },
      typeOptions: '',
      loudongs: '',
      page: {
        pageNum: 1,
        pageSize: 999999999,
        total: 5
      },
      dialogVisible: false
    }
  },
  created() {
    this.getType()
    this.getPage()
  },
  methods: {
    to(id) {
      this.$router.push({path: '/garden/site/floor', query: {loudongId: id}})
    },
    del(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onUpdate(row) {
      this.ruleForm = row
      this.dialogVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveOrUpdate(this.ruleForm).then(res => {
            this.$message.success('操作成功')
            this.dialogVisible = false
            this.getPage()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onAdd() {
      this.ruleForm = {
        loudongName: '',
        loudongNum: null,
        loudongLocation: '',
        type: null
      }
      this.dialogVisible = true
    },
    getPage() {
      getPage(this.page, this.queryParams).then(res => {
        this.loudongs = res.data.records
        this.page.pageNum = res.data.current
        this.page.pageSize = res.data.size
        this.page.total = res.data.total
      })
    },
    getType() {
      getType().then(res => {
        this.typeOptions = res.data
      })
    },
  }
}
</script>

<style scoped>
.spanClass div {
  display: inline-block;
}

.box-card {
  width: 300px;
  font-size: 14px;
  padding: 6px;
  margin: 5px;
}
</style>
